<script setup>
import { ossImg } from "@/utils/utils";
import { ref, onMounted } from "vue";
import { getDistance } from "@/services/address";

const emdlz = getApp().emdlz2
const emits = defineEmits(['close', 'service'])

const locationInfo = ref({ latitude: 0, longitude: 0 })
const storeList = ref([])
const loadStatus = ref(true)

let enterTime = "";
let outTime = "";
let stayTime = "";

onMounted(() => {
  // 用户进入时间
  enterTime = new Date();
  uni.getLocation({
    type: "gcj02",
    success(res) {
      locationInfo.value.latitude = res.latitude;
      locationInfo.value.longitude = res.longitude;
      setTimeout(getStoreList, 400);
    },
    fail(err) {
      uni.getSetting({
        success: (res) => {
          if (
            typeof res.authSetting["scope.userLocation"] != "undefined" &&
            !res.authSetting["scope.userLocation"]
          ) {
            wx.showModal({
              title: "提示",
              content: "当前位置信息未开启，开启后可查看附近门店信息",
              success: (res) => {
                if (res.confirm) {
                  //打开设置 让用户点击允许 这样可以重新获取
                  wx.openSetting({
                    success: (res) => {
                      if (res.authSetting["scope.userLocation"]) {
                        // 授权成功，重新定位即可
                        wx.getLocation({
                          type: "gcj02",
                          altitude: true,
                          isHighAccuracy: true,
                          success: (res) => {
                            console.log('调用第二次')
                            locationInfo.value.latitude = res.latitude;
                            locationInfo.value.longitude = res.longitude;
                            setTimeout(getStoreList, 400);
                          },
                          fail: (err) => {
                            console.log(err);
                          },
                        });
                      } else {
                        // 没有允许定位权限
                        wx.showToast({
                          title: "没有允许定位权限",
                          icon: "none",
                        });
                      }
                    },
                  });
                }
              },
            });
          }
        },
      });
    },
  });
})

const getStoreList = async () => {
  const { data } = await getDistance({ type: 3, ...locationInfo.value })
  storeList.value = data || []
  loadStatus.value = false
}

const onCloseDialog = (backImage = false) => {
  console.log(backImage)
  if (typeof backImage === 'boolean' && backImage) {
    emdlz('track','event','Oreo_eggy_store_list_page','click','close_store_list_page','');
  } else {
    emdlz('track','event','Oreo_eggy_store_list_page','click','click_X','');
  }
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  console.log('---StoreList-------stayTime', stayTime)
  emdlz('track','event','Oreo_eggy_store_list_page','view','store_list_page', stayTime);
  emits('close')
}

// 传入米转换千米
const formatDistance = (distance) => (distance / 1000).toFixed(2)
</script>

<template>
  <view class="rule-modal">
    <image
      class="w-72px h-26px mb-31px absolute left-0 top-42px z-999"
      :src="ossImg('others/cloudsample/dialog/but_back.png')"
      @click.stop="onCloseDialog(true)"
    />
    <view
      class="rule-modal__body"
      :style="{ backgroundImage: `url(${ossImg(`others/cloudsample/dialog/bg_mdlb.png`)})`}"
    >
      <image
        class="w-42px h-42px absolute top-76px right-19px"
        :src="ossImg('others/cloudsample/dialog/close.png')"
        @click.stop="onCloseDialog"
      ></image>
      <scroll-view class="rule-text" :scroll-y="true">
        <div class="store-scroll">
          <view
            class="store-card"
            v-for="item in storeList"
            :key="item.id"
            :style="{ backgroundImage: `url(${ossImg(`others/cloudsample/store_card.png`)})`}"
          >
            <view class="store-info flex-1">
              <view class="store-name text-18px font-bold">{{ item.name }}</view>
              <view class="store-address text-10px">{{ item.address }}</view>
            </view>
            <view
              class="location-data"
              :style="{ backgroundImage: `url(${ossImg(`others/cloudsample/store_location.png`)})`}"
            >
              <view>{{ formatDistance(item.distance) }}km</view>
            </view>
          </view>
        </div>
      </scroll-view>
      <image
        class="w-28px h-44px mt-20px"
        :src="ossImg(`others/cloudsample/dialog/arrow-down.png`)"
      ></image>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.store-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.store-card {
  width: 279px;
  height: 111px;
  border-radius: 15px;
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 0 19px;
  box-sizing: border-box;
  color: #0041C0;
  margin-bottom: 10px;
  letter-spacing: 2px;
  position: relative;
  .location-data {
    width: 68px;
    height: 35px;
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    top: 18px;
    right: 15px;
    position: absolute;
    font-size: 12px;
    line-height: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    view {
      font-size: 11px;
      letter-spacing: 0;
      width: 44px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 13px;
      right: 3px;
      text-align: center;
    }
  }
  .store-name {
    width: 152px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 18px;
  }
  .store-address {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 1.2;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 6px;
  }
}
.rule-modal {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 20px;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: -1;
  }
  .rule-modal__body {
    margin: 0 auto;
    width: 326px;
    height: 583px;
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: scroll;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 138px;
    .service-btn {
      width: 112px;
      height: 36px;
      margin-top: 37px;
    }
    .rule-text {
      height: 360px;
      box-sizing: border-box;
      image {
        margin: 0 auto;
        display: block;
      }
      .text-image {
        width: 246px;
      }
    }
  }
}
</style>
